<template>
    <div class="qingwu">
        <div class="admin_table_page_title">
            <a-button @click="$router.back()" class="float_right" icon="arrow-left">返回</a-button>
            {{ edit ? '编辑楼层' : '添加楼层' }}
        </div>
        <div class="unline underm"></div>
        <div class="admin_form">
            <a-form-model :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" ref="form">

                <a-form-model-item label="小区" :rules="{ required: true}">
                    <a-select  placeholder="请选择小区" :disabled="edit" v-model="form.community_id" @change="communityChange">
                        <a-select-option :value="value.community_id" v-for="(value, index) in communityList" :key="index">
                            {{value.community_name}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>

                <a-form-model-item label="楼号" :rules="{ required: true}">
                    <a-select  placeholder="请选择楼号" :disabled="edit" v-model="form.h_id">
                        <a-select-option :value="value.h_id" v-for="(value, index) in houseList" :key="index">
                            {{value.house_num}} 号楼
                        </a-select-option>
                    </a-select>
                </a-form-model-item>


                <a-form-model-item label="单元数" :rules="{ required: true}">
                    <a-input v-model="form.element" :disabled="edit" placeholder="请填写单元数量，填写 3 则代表添加第3单元，填写 1-3 则代表添加1到3单元" />
                </a-form-model-item>

                <a-form-model-item label="楼层数" :rules="{ required: true}">
                    <a-input v-model="form.floor" placeholder="请填写楼层数量，填写 3 则代表添加第3层，填写 1-20 则代表添加1到20层" />
                </a-form-model-item>

<!--                <a-form-model-item label="房间数" :rules="{ required: true}">-->
<!--                    <a-input v-model="form.room" placeholder="请填写房间数量，填写 5 则代表每层楼有5个房间" />-->
<!--                </a-form-model-item>-->

                <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
                    <a-button type="primary" @click="handleSubmit" :loading="loading">提交</a-button>
                </a-form-model-item>
            </a-form-model>


        </div>
    </div>
</template>

<script>

const key = 'updatable';
export default {
    props: {},
    data() {
        return {
            form: {
                element: '',
                floor: '',
                h_id: '',
                f_id: '',
            },
            platform: false, // 平台PC false 手机 TRUE
            communityList: [],
            houseList: [],
            f_id: '',
            edit: false,
            loading: false,

        };
    },
    watch: {},
    computed: {},
    methods: {
        handleSubmit(formName) {
            this.loading = true;
            this.$message.loading({ content: 'Loading...', key });
            let api = this.$apiHandle(this.$api.estateElement,this.f_id);
            if(api.status){
                this.$put(api.url,this.form).then(res=>{
                    this.loading = false;
                    if (res.code == 200) {
                        this.$message.success({ content: res.msg, key, duration: 2 })
                        return this.$router.back();
                    } else {
                        return this.$message.error(res.msg);
                    }
                })
            }else{
                this.$post(api.url,this.form).then(res=>{
                    this.loading = false;
                    if (res.code == 200) {
                        this.$message.success({ content: res.msg, key, duration: 2 })
                        return this.$router.back();
                    } else {
                        this.$message.error({ content: res.msg, key, duration: 2 })
                    }
                })
            }
        },

        get_info() {
            this.$get(this.$api.estateElement + '/' + this.f_id).then(res => {
                this.form.house = res.data.list.house_num;
                this.form.community_id = res.data.list.c_id;
                this.houseList = res.data.house_list;
                this.form.h_id = res.data.list.h_id;
                this.form.floor = res.data.list.floor;
                this.form.element = res.data.list.element.element_num;
                // this.check_platform(false);
                // this.$forceUpdate();
            })
        },
        communityChange (value) {
            this.form.f_id = '';
            this.$get(this.$api.allHouse + '/' + value).then(res => {
                this.houseList = res.data;
                console.log(res)
            })

            console.log(this.houseList)
        },

        onload() {
            // 判断是否是编辑
            if (!this.$isEmpty(this.$route.params.f_id)) {
                this.f_id = this.$route.params.f_id;
                this.get_info();
                this.edit = true
            }
        },

    },
    created() {
        this.onload();
    },
    mounted() {
        this.$get(this.$api.estateCommunity).then(res => {
            this.communityList = res.data.data;
        })

    }
};
</script>

